<template>
	<view class="switch-container" :style="[{ background: bj_color}]">
		<view class="switch_view">
			<view class="switch-item" :class="{'checked_switch':isSwitch}" :style="isSwitch?`color:${checked_color}`:''"
			 @click.prevent.stop="changeSwitch(true)" :animation="animationData2">
				{{switchList[0]}}
			</view>
			<view class="switch-item" :class="{'checked_switch':!isSwitch}" :style="!isSwitch?`color:${checked_color}`:''"
			 @click.prevent.stop="changeSwitch(false)" :animation="animationData3">
				{{switchList[1]}}
			</view>
		</view>
		<!-- <view class="disabled" v-if="disabled"></view> -->
		<view class="position_view" :animation="animationData1" :style="[{ background: checked_bj_color}]"></view>
	</view>
</template>

<script>
	export default {
		props: {
			switchList: {
				type: Array,
				default: () => {
					return ['排序', '排名'];
				}
			},
			changeMsg:Function,
			
			searchContent: {
				type: String, //属性类型
				value: ""
			},
			tabCur1: { // 默认值
				type: Number,
				default: 0
			},
			
			disabled: {
				type: Boolean,
				default: false
			},
			bj_color: {
				type: String,
				default: '#efefef'
			},
			checked_bj_color: {
				type: String,
				default: '#fff'
			},
			checked_color: {
				type: String,
				default: '#333'
			},
			id: {
				type: null,
				default: null
			}
		},
		mounted() {
		  	
		},
		watch: {
			// 监听默认值
			defaultSwitch() {
				if (this.isSwitch != this.defaultSwitch) {
					console.log(this.isSwitch)
					this.isSwitch = this.defaultSwitch;
					this.changeAnimation();
				}
			}
		},
		data() {
			return {
				isSwitch: true,
				initAnimation: {},
				animationData1: {},
				animationData2: {},
				animationData3: {}
			};
		},
		created() {
			this.initAnimation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease'
			});
			this.isSwitch = this.defaultSwitch;
			this.changeAnimation();
		},
		methods: {
			changeSwitch(isSwitch) {
				if(this.isSwitch){
					this.changeMsg(0)
				}else{
					this.changeMsg(1)
					
				}
				if (this.isShowModal) {
					let index = isSwitch ? 0 : 1;
					let text = this.switchList[index];
				} else {
					this.isSwitch = isSwitch;
					this.changeAnimation();
					this.callParentEvent(isSwitch);
				}
			},
			// 动画效果
			changeAnimation() {
				if (this.isSwitch) {
					this.animationData1 = this.initAnimation.left(0).width('50%').step().export();
					this.animationData2 = this.initAnimation.width('50%').step().export();
					this.animationData3 = this.initAnimation.width('50%').step().export();
				} else {
					this.animationData1 = this.initAnimation.left('50%').width('50%').step().export();
					this.animationData2 = this.initAnimation.width('50%').step().export();
					this.animationData3 = this.initAnimation.width('50%').step().export();
				}
			},
			// change回调
			callParentEvent() {
				this.$emit('change', this.isSwitch, this.id);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.switch-container {
		display: flex;
		flex-direction: row;
		width: 298rpx;
		height: 66rpx;
		border-radius: 100upx;
		// border: 1upx solid #ccc;
		position: relative;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
		border-radius: 30px;
		margin-top: 10rpx;

		.switch_view {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			display: flex;
			border-radius: 100upx;

			.switch-item {
				color: #333;
				font-size: 28rpx;
				height: 100%;
				width: 40%;
				border-radius: 100upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.position_view {
			position: absolute;
			top: 0;
			left: 0;
			width: 60%;
			height: 100%;
			border-radius: 100upx;
			background: $uni-color-primary;
		}

		.disabled {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			background: #fff;
			opacity: 0.6;
			border-radius: 100upx;
		}
	}
</style>
